<template>
  <div class="all">
    <!-- 租户之间授权 -->
    <div class="left">
      <!-- 树形图 -->
      <leftTree v-if="treeData.length>0" :treeData="treeData" @treeOutput="treeOutput"></leftTree>
    </div>
    <div class="right">
      <div class="right_top" v-if="DInformation">
        <!-- <div class="right_top_list">
          <div class="keys">编号</div>
          <div class="colon">:</div>
          <div class="value">{{DInformation['id']}}</div>
        </div>-->
        <div class="right_top_list">
          <div class="keys">租户名称</div>
          <div class="colon">:</div>
          <div class="value">{{DInformation['name']}}</div>
        </div>
        <div class="right_top_list">
          <div class="keys">租户类型</div>
          <div class="colon">:</div>
          <div class="value" v-if="DInformation['type']=='1'">生产厂商</div>
          <div class="value" v-else-if="DInformation['type']=='2'">经销商</div>
          <div class="value" v-else-if="DInformation['type']=='3'">自来水公司</div>
        </div>
        <div class="right_top_list">
          <div class="keys">创建人</div>
          <div class="colon">:</div>
          <div class="value">{{DInformation['createBy']}}</div>
        </div>
        <div class="right_top_list">
          <div class="keys">租户联系人</div>
          <div class="colon">:</div>
          <div class="value"></div>
        </div>
        <div class="right_top_list">
          <div class="keys">联系电话</div>
          <div class="colon">:</div>
          <div class="value"></div>
        </div>
        <div class="right_top_list">
          <div class="keys">租户地址</div>
          <div class="colon">:</div>
          <div class="value"></div>
        </div>
      </div>
      <div class="right_bottom">
        <div class="right_bottom_left" v-show="typeClass=='1'">
          <div class="title">
            <el-button class="sq" type="primary" size="mini" plain>厂商与经销商授权</el-button>
          </div>
          <div class="checkbox">
            <el-checkbox-group class="el_check" v-model="ManufacturerAndDistributorAuthorization">
              <el-checkbox
                class="check_list"
                :label="ob.id"
                v-for="ob in mergeType1"
                :key="ob.id"
              >{{ob.name}}</el-checkbox>
              <!-- <el-checkbox class="check_list" label="2">千宝通</el-checkbox>
              <el-checkbox class="check_list" label="3">千宝通</el-checkbox>-->
            </el-checkbox-group>
          </div>
         
        </div>
        <div class="right_bottom_right" v-show="typeClass=='1'">
          <div class="title">
            <el-button class="sq" type="primary" size="mini" plain>厂商与水司</el-button>
          </div>
          <div class="checkbox">
            <el-checkbox-group class="el_check" v-model="MFAC">
              <el-checkbox
                class="check_list"
                :label="ob.id"
                v-for="ob in mergeType2"
                :key="ob.id"
              >{{ob.name}}</el-checkbox>
              <!-- <el-checkbox class="check_list" label="2">自来水公司</el-checkbox>
              <el-checkbox class="check_list" label="3">自来水公司</el-checkbox>
              <el-checkbox class="check_list" label="4">自来水公司</el-checkbox>
              <el-checkbox class="check_list" label="5">自来水公司</el-checkbox>
              <el-checkbox class="check_list" label="6">自来水公司</el-checkbox>
              <el-checkbox class="check_list" label="7">自来水公司</el-checkbox>
              <el-checkbox class="check_list" label="8">自来水公司</el-checkbox>
              <el-checkbox class="check_list" label="9">自来水公司</el-checkbox>-->
            </el-checkbox-group>
          </div>

        </div>
        
      </div>
      <el-button class="save" style="margin:20px;" type="primary" size="mini" plain @click="SaveData">保存</el-button>
      <!-- <div class="right_bottom_middle" v-show="typeClass=='2'">
        <div class="title">
          <el-button class="sq" type="primary" size="mini" plain>经销商与水司</el-button>
        </div>
        <div class="checkbox">
          <el-checkbox-group class="el_check" v-model="DealersAndCompanies">
            <el-checkbox class="check_list" label="1">自来水公司</el-checkbox>
            <el-checkbox class="check_list" label="2">自来水公司</el-checkbox>
            <el-checkbox class="check_list" label="3">自来水公司</el-checkbox>
            <el-checkbox class="check_list" label="4">自来水公司</el-checkbox>
            <el-checkbox class="check_list" label="5">自来水公司</el-checkbox>
            <el-checkbox class="check_list" label="6">自来水公司</el-checkbox>
            <el-checkbox class="check_list" label="7">自来水公司</el-checkbox>
            <el-checkbox class="check_list" label="8">自来水公司</el-checkbox>
            <el-checkbox class="check_list" label="9">自来水公司</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="btn">
          <el-button
            class="save"
            type="primary"
            size="mini"
            @click="DealersAndCompaniesSave"
            plain
          >保存</el-button>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import leftTree from "@/views/components/FLPage/leftTree";
import {
  baseAffiliatedcompanyfindByTree, // 树形图查询
  postBaseTenantInformation, //id查询详细右侧信息
  findByParentId, //根据父节点id查询
  getFindByType,//根据类型查询租户 参数：type=1是厂商，type=2经销商,type=3水司
  SaveFun,//点击保存
} from "@/api/TheTenantAuthorization";
export default {
  components: {
    leftTree //树形图
  },
  data() {
    return {
      //树形图输入到组件的数据
      treeData: [],
      //右上侧的详细信息
      DInformation: {},
      //厂商与经销商授权
      ManufacturerAndDistributorAuthorization: [],
      //右下详细信息多选框选项
      //厂商与经销商授权
      MType2: [],
      //厂商与公司
      ManufacturersAndCompanies: [],
      //经销商与水司
      MFAC: [],
      //经销商与水司选项
      DealersAndCompanies: [],
      //点击之后type类型
      typeClass: undefined,
      //获取租户
      lesseeData: undefined,
      //“厂商与经销商”没选中的
      notChecked: [],
      //“厂商与经销商”选中的
      Checked: [],
      //"厂商与水司"没选中的
      CSnotChecked: [],
      //"厂商与水司"选中的
      CSChecked: [],
    };
  },
  computed: {
    //‘厂商与经销商授权’的全部选项
    mergeType1() {
      let arr = [];
      arr = this.notChecked.concat(this.Checked);
      return arr;
    },
    //'厂商与水司'的全部选项
    mergeType2() {
      let arr = [];
      arr = this.notChecked.concat(this.CSChecked);
      return arr;
    }
  },
  async created() {
    this.forTree();
    this.detailedInformation("1242381962350559232"); //id查询详细右侧信息
    this.forByParentId("1242381962350559232"); //右上默认显示id为2的信息
  },
  methods: {
    //获取树形图信息
    forTree() {
      baseAffiliatedcompanyfindByTree()
        .then(Response => {
          this.treeData = Response.data;
        })
        .catch(() => {
          this.$message.error(
            "错误信息：api/admin/baseAffiliatedcompanyfindByTree 树形图访问失败！"
          );
        });
    },
    //id查询详细右侧信息
    detailedInformation(id) {
      postBaseTenantInformation(id)
        .then(Response => {
          console.log("右侧详细信息数据");
          console.log(Response);
          this.DInformation = Response.data;
          if (this.DInformation["type"]) {
            console.log("有type！");
            //type=1
            let TJ = [1, 2, 3];
            this.typeClass = this.DInformation["type"];
            console.log(this.DInformation["type"]);
            for (let i = 0; i < TJ.length; i++) {
              if (this.DInformation["type"] <= TJ[i]) {
                this.getFByType(TJ[i].toString());
              }
            }
          }
        })
        .catch(() => {
          this.$message.error("错误信息：admin/baseTenantInformation/${id}！");
        });
    },
    //根据父节点id查询 findByParentId
    forByParentId(id) {
      findByParentId(id)
        .then(Response => {
          // console.log("根据父节点id查询");
          // console.log(Response);
          let arr = [];
          for (let i = 0; i < Response.data.length; i++) {
            let obj = {};
            obj["id"] = Response.data[i]["id"];
            obj["name"] = Response.data[i]["name"];
            arr.push(obj);
            this.ManufacturerAndDistributorAuthorization.push(obj["id"]);
            //
            this.MFAC.push(obj["id"]);
          }
          this.notChecked = arr;

          console.log("&&&&&&&&&this.notChecked&&&&&&&&&");
          console.log(this.notChecked);
        })
        .catch(() => {
          this.$message.error(
            "错误信息：api/admin/baseAffiliatedcompany/findByParentId/${Id}！"
          );
        });
    },
    //根据类型查询租户
    getFByType(type) {
      // console.log("根据类型查询租户");
      getFindByType(type)
        .then(Response => {
          // console.log(Response.data);
          if (type == "1") {
            this.lesseeData = Response.data;
            let arr = [];

            for (let i = 0; i < Response.data.length; i++) {
              let obj = {};
              obj["id"] = Response.data[i]["id"];
              obj["name"] = Response.data[i]["name"];
              arr.push(obj);
            }
            this.Checked = arr;
          } else if (type == "2") {
            // alert('type==2时')
            let arr = [];

            for (let i = 0; i < Response.data.length; i++) {
              let obj = {};
              obj["id"] = Response.data[i]["id"];
              obj["name"] = Response.data[i]["name"];
              arr.push(obj);
            }
            this.CSChecked = arr;
            console.log("^^^^this.Checked^^^^");
            console.log(this.CSChecked);
          }
        })
        .catch(() => {
          this.$message.error(
            "错误信息：api/admin/baseTenantInformation/findByType/${type}！"
          );
        });
    },
    //树形图输出
    treeOutput(val) {
      console.log("树形图输出");
      console.log(val);
      let parameterId = val.id;
      // let parameterId = "2";
      this.detailedInformation(parameterId);
      this.forByParentId(parameterId);
      //查询
      this.getFByType(this.typeClass);
    },
    //厂商与经销商授权保存
    ManufacturerAndDistributorAuthorizationSave() {},
    //厂商与水司保存
    ManufacturersAndCompaniesSave() {},
    //经销商与水司
    DealersAndCompaniesSave() {},
    //保存
    SaveData(){
      console.log(this.DInformation)
      console.log(this.ManufacturerAndDistributorAuthorization)
      console.log(this.MFAC)
      let arr=this.ManufacturerAndDistributorAuthorization.concat(this.MFAC)
      SaveFun(this.DInformation.id,arr).then(Response=>{
         this.$message({
          message: '添加成功！',
          type: 'success'
        });
      }).catch(()=>{
        this.$message({
          message: '保存失败！',
          type: 'warning'
        });
      })
    }
  }
};
</script>
<style lang="scss" src="./style.scss" scoped></style>